<template>
	<el-dialog :width="dialogWidth" class="goods_dialog" title="选择商品" :visible.sync="dialogVisible"
		:append-to-body="appendToBody" :close-on-click-modal="false">
		<div class="flex main_wrapper">
			<div class="flex-1">
				<el-form :inline="true" :model="searchForm" class="demo-form-inline" @submit.native.prevent>
					<el-form-item label="商品ID或名称">
						<el-input v-model="searchForm.goods_name" placeholder="请输入商品ID或名称" @keyup.enter.native="search"
							style="width: 170px;" />
					</el-form-item>
					<el-form-item v-if="showTypeSelect" label="产品类别">
						<el-select v-model="searchForm.cate_id" clearable placeholder="请选择产品类别" style="width: 150px;">
							<el-option v-for="item in categoryList" :key="item.id" :label="item.name" :value="item.id" />
						</el-select>
					</el-form-item>
					<el-form-item v-if="showTypeSelect" label="活动方式">
						<el-select v-model="searchForm.type" clearable placeholder="请选择活动方式" @change="handelChange"
							style="width: 150px;">
							<el-option label="联通5G" value="0" />
							<el-option label="碎屏险" value="1" />
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-button size="small" type="primary" @click="search">查询</el-button>
						<el-button size="small" @click="clearSearch">重置</el-button>
						<slot name="btns" />
					</el-form-item>
				</el-form>
				<div class="flex flex-wrap goods_list">
					<template v-for="item in goodsList">
						<div :key="item.goods_id" class="flex goods_item" :class="{ 'active': isSelect(item.goods_id) }"
							@click="handleSelect(item)">
							<svg-icon v-if="isSelect(item.goods_id)" icon-class="check" :size="10" class="check_icon" />
							<el-image :src="$globalObj.imgBaseUrl + item.imgurl" fit="fill" />
							<div class="line-block">
								<p class="goods_title">{{ item.title }}</p>
								<p class="goods_id">ID: {{ item.goods_id }}</p>
								<p v-show="showCate" class="goods_id">分类: {{ item.cate_name }}</p>
								<p v-show="(item.activity_unicom == 1) || (item.activity_insurance == 1)" class="goods_id">活动: {{
										item.activity_unicom == 1 ? '联通5G ' : ''
								}}{{ item.activity_insurance == 1 ? '碎屏险' : '' }}</p>
							</div>
						</div>
					</template>
				</div>
				<div class="text-right">
					<el-pagination :current-page.sync="searchForm.page" :page-size="pageSize" layout="total, prev, pager, next"
						:total="total" prev-text="上一页" next-text="下一页" background @current-change="handleCurrentChange" />
				</div>
			</div>
			<div class="checked_wrap">
				<p style="margin-bottom:30px">已选商品（{{ selectItems.length }}<span v-if="maxNum">/{{ maxNum }}</span>）</p>
				<template v-for="(sItem, index) in selectItems">
					<goods-link :key="sItem.goods_id" ref="goodsLink" :show-cate="showCate" :goods-data="sItem"
						:show-sort="multiple" :show-tool="showCheckedTool" @handleDelete="deleteGoods(index, sItem)"
						@upSort="upSort(index)" @downSort="downSort(index)" />
				</template>
			</div>
		</div>
		<div slot="footer" class="dialog-footer">
			<el-button size="small" @click="dialogVisible = false">取 消</el-button>
			<el-button size="small" type="primary" @click="submit">确 定</el-button>
		</div>
	</el-dialog>
</template>
  
<script>
import { getGoodsList, getCategoryList } from '@/api/recommend'
import { editGoodsUnicom, editGoodsInsurance } from '@/api/audit'

import goodsLink from './goodsLink'
export default {
	components: { goodsLink },
	props: {
		multiple: {
			type: Boolean,
			default: false
		},
		appendToBody: {
			type: Boolean,
			default: false
		},
		dialogWidth: {
			type: String,
			default: '1020px'
		},
		maxNum: {
			type: Number,
			default: 0
		},
		showTypeSelect: {
			type: Boolean,
			default: false
		},
		pageSize: {
			type: Number,
			default: 8
		},
		showCheckedTool: {
			type: Boolean,
			default: false
		},
		showCate: {
			type: Boolean,
			default: true
		}
	},
	data() {
		return {
			dialogVisible: false,
			searchForm: {
				goods_name: '',
				cate_id: null,
				page: 1,
				type: '联通5G'
			},
			selectItems: [],
			goodsList: [],
			total: 0,
			categoryList: []
		}
	},
	watch: {
		dialogVisible(val) {
			if (val) {
				this.getList()
				if (this.showTypeSelect) {
					this.getSelectList()
				}
			} else {
				// 重置
				this.reset()
			}
		}
	},
	methods: {
		// 升序
		upSort(index) {
			if (index === 0) {
				return
			}
			const item = this.selectItems[index]
			this.$set(this.selectItems, index, this.selectItems[index - 1])
			this.$set(this.selectItems, index - 1, item)
		},
		// 降序
		downSort(index) {
			if (index === this.selectItems.length - 1) {
				return
			}
			const item = this.selectItems[index]
			this.$set(this.selectItems, index, this.selectItems[index + 1])
			this.$set(this.selectItems, index + 1, item)
		},
		// 删除商品
		deleteGoods(index, type) {
			console.log(type);
			this.selectItems.splice(index, 1)
		},
		// 获取商品列表
		getList() {
			getGoodsList({ pageSize: this.pageSize, ...this.searchForm }).then(res => {
				this.goodsList = res.data
				this.total = res.total
				this.goodsList.forEach(item => {
					if (item.activity_unicom == 1 || item.activity_insurance == 1) {
						if (this.selectItems.findIndex(item => item.goods_id !== -1)) {
							this.selectItems.push(item)
						}

					}
				})
			})
		},
		submit() {
			let arr = []
			this.selectItems.forEach(element => {
				arr.push(element.goods_id)
			});
			console.log(arr);
			console.log(this.searchForm.type);
			if (this.searchForm.type == '联通5G') {
				editGoodsUnicom(arr).then(res => {
					console.log(res);
					this.selectItems = []
					this.getList()
				})
			} else {
				editGoodsInsurance(arr).then(res => {
					console.log(res);
					this.selectItems = []
					this.getList()
				})
			}
			//   this.dialogVisible = false
		},
		// 点击选中
		handleSelect(select) {
			const index = this.selectItems.findIndex(item => item.goods_id === select.goods_id)
			if (index > -1) {
				// 已经选中取消选中
				this.selectItems.splice(index, 1)
			} else {
				// 选中
				if (!this.multiple) {
					this.selectItems.push(select)
					// 多选
					// if (this.selectItems.length < this.maxNum) {
					//   this.selectItems.push(select)
					// } else {
					//   this.$message({
					//     message: '数量已达到可选上限',
					//     type: 'warning'
					//   })
					// }
				} else {
					// 单选
					this.selectItems = [select]
				}
			}
		},
		// 判断是否选中
		isSelect(id) {
			return this.selectItems.findIndex(item => item.goods_id === id) > -1
		},
		// 页码切换
		handleCurrentChange(val) {
			this.searchForm.page = val
			this.getList()
		},
		// 搜索商品
		search() {
			if (this.searchForm.goods_name || this.searchForm.cate_id) {
				this.searchForm.page = 1
				this.getList()
			}
		},
		handelChange(val) {
			if (val == 1) {
				this.searchForm.type = '碎屏险'
				this.selectItems.forEach((item, index) => {
					if (item.activity_insurance == 1) {
						this.selectItems.splice(index, 1)
					}
				})
			} else {
				this.searchForm.type = '联通5G'
				this.selectItems.forEach((item, index) => {
					if (item.activity_unicom == 1) {
						this.selectItems.splice(index, 1)
					}
				})
			}
		},
		// 重置
		clearSearch() {
			this.searchForm.goods_name = ''
			this.searchForm.cate_id = ''
			this.searchForm.page = 1
			this.getList()
		},
		// 清空数据
		reset() {
			this.searchForm = {
				goods_name: '',
				cate_id: null,
				page: 1
			}
			this.selectItems = []
		},
		// 获取二级分类列表
		getSelectList() {
			getCategoryList().then(res => {
				this.categoryList = res
			})
		}
	}
}
</script>
  
<style lang="scss" scoped>
.goods_item {
	position: relative;
	width: 310px;
	height: 110px;
	padding: 10px;
	margin-bottom: 10px;
	margin-right: 10px;
	border: 1px solid #eeeeee;

	&.active {
		border: 1px solid $mainBlue;
	}

	.check_icon {
		position: absolute;
		top: 0;
		right: 0;
		z-index: 3;
	}

	.el-image {
		margin-right: 10px;
		width: 90px;
		height: 90px;
	}

	.goods_title {
		color: #666666;
		// margin: 12px 0;
	}

	.goods_id {
		color: #999999;
		margin-top: 5px;
	}
}

.checked_wrap {
	width: 350px;
	padding: 10px;
	max-height: 560px;
	overflow: auto;
	border-left: 1px solid #eeeeee;
}
</style>
  